<template>
  <div class="login">
    <div id="app">
      <el-container>
        <el-header height="72px" style="border: 1px solid #f4f4f4">
          <div class="center">
            <el-row gutter="20">
              <el-col span="2">
                <img src="imgs/首页log1.jpg" style="width: 92px ;height:41px ;margin-top: 20px ;float: left">
              </el-col>
              <el-col span="4">
                <i class="el-icon-location-outline"></i>
                合肥
                <i class="i-arrow-location"></i>
              </el-col>
              <el-col span="6">
                <a href="Index.html">首页</a>
                <a href="">分类</a>
              </el-col>
              <el-col span="8">
                <input class="input-search" placeholder="搜索明星、演出">
                <button class="button-search">搜索</button>
              </el-col>
              <el-col span="2" style="margin-bottom: 20px">
                <el-popover placement="top-start" trigger="hover">
                  <div slot="reference">
                    <i style="font-size: 30px; position:relative;top: 20px"
                       class="el-icon-user"></i>
                  </div>
                  <a>个人信息</a><br>
                  <hr>
                  <a>账号设置</a><br>
                  <hr>
                  <a>订单管理</a><br>
                  <hr>
                  <a>退出登录</a><br>
                </el-popover>
              </el-col>
              <el-col span="2" style="margin-bottom: 20px">
                <el-popover placement="top-start" trigger="hover">
                  <div slot="reference">
                    <i style="font-size: 30px; position:relative;top: 20px"
                       class="el-icon-mobilephone"></i>
                    下载
                  </div>
                  <img src="imgs/二维码.jpg" width="50px" height="50px">
                </el-popover>
              </el-col>
            </el-row>
          </div>
        </el-header>
        <el-main class="center"
                 style="margin-top: 30px;background-color: #1b0741;
                height: 600px;background-size: cover;background-position: center">
          <img src="imgs/首页背景.jpg" style="width: 50%;float: left;margin: 50px auto">
          <el-card style="width: 500px;height: 400px;margin: 50px auto">
            <el-form label-width="80px" style="width: 400px;margin: 50px auto">
              <el-form-item label="用户名">
                <el-input type="text" v-model="user.username" placeholder="请输入用户名"></el-input>
              </el-form-item>
              <el-form-item label="密码">
                <el-input type="password" v-model="user.password" placeholder="请输入用密码"></el-input>
              </el-form-item>
              <el-form-item label="验证码">
                <el-input type="text" id="vcode" placeholder="请输入验证码" v-model="vcode"></el-input>
              </el-form-item>
              <el-form-item>
                <canvas id="canvas" width="100" height="43" @click="dj()"
                        style="border: 1px solid #ccc;border-radius: 5px;position: relative;left: 85px"></canvas>
              </el-form-item>
              <el-form-item>
                <el-button @click="login()" type="primary" style="position: relative;left: 100px;bottom:10px">登录
                </el-button>
              </el-form-item>
              <el-form-item>
                <el-link href="https://www.baidu.com" type="primary"
                         style="position: relative;left: 230px;bottom: 60px">忘记密码
                </el-link>
                <el-link href="reg.html" type="primary"
                         style="position: relative;left: 230px;bottom: 60px">用户注册
                </el-link>
              </el-form-item>
            </el-form>
          </el-card>
        </el-main>

        <el-footer style="background-color: #f8f8f8;height: 280px; margin:0 auto;width: 100%;">
          <div class="center" style="color: #666;width: 1200px">
            <div style="height: 80px;line-height:15px;margin: 0 ">
              <ul class="footer_links">
                <li class="footer_links_list"><a href="">帮助中心</a></li>
                <li class="footer_links_list">|</li>
                <li class="footer_links_list"><a href="">公司介绍</a></li>
                <li class="footer_links_list">|</li>
                <li class="footer_links_list"><a href="">品牌识别</a></li>
                <li class="footer_links_list">|</li>
                <li class="footer_links_list"><a href="">公司大事记</a></li>
                <li class="footer_links_list">|</li>
                <li class="footer_links_list"><a href="">协议及隐私政策</a></li>
                <li class="footer_links_list">|</li>
                <li class="footer_links_list"><a href="">廉政举报</a></li>
                <li class="footer_links_list">|</li>
                <li class="footer_links_list"><a href="">联系合作</a></li>
                <li class="footer_links_list">|</li>
                <li class="footer_links_list"><a href="">招聘信息</a></li>
                <li class="footer_links_list">|</li>
                <li class="footer_links_list"><a href="">防骗秘籍</a></li>

              </ul>
            </div>
            <div style="height: 172px;margin: 10px ">
              <el-row gutter="20">
                <el-col span="8">
                  <img src="imgs/首页log1.jpg" style="width:167px;height: 60px ;margin:15px">
                  <img src="imgs/二维码.jpg" style="width:87px;height: 87px;margin-right:30px">
                </el-col>
                <el-col span="16">
                  <div class="footer_r_1">
                    <a href="" class="footer_r_1_a">在线客服</a>
                  </div>
                  <br>


                  <ul class="footer_r_words">
                    <li class="footer_r_words_word">
                      <a href="">京ICP证031057号</a>
                    </li>
                    <li class="footer_r_words_line">|</li>
                    <li class="footer_r_words_word">
                      <a href="">京ICP备11043884号</a>
                    </li>
                    <li class="footer_r_words_line">|</li>
                    <li class="footer_r_words_word">
                      <a href="">京公网安备11010502037341号</a>
                    </li>
                    <li class="footer_r_words_line">|</li>
                    <li class="footer_r_words_word">
                      <a href="">广播电视节目制作经营许可证(京)字第02253号</a>
                    </li>
                    <br>
                    <li class="footer_r_words_word">
                      <a href="">网络文化经营许可证 京网文[2023]1649-054号</a>
                    </li>
                    <li class="footer_r_words_line">|</li>
                    <li class="footer_r_words_word">
                      <a href="">营业性演出许可证京市演587号</a>
                    </li>
                    <br>
                    <li class="footer_r_words_word">
                      北京大麦文化传媒发展有限公司 版权所有大麦网Copyright 2003-2020 All Rights Reserved
                    </li>
                    <br>
                    <li class="footer_r_words_word">
                      举报投诉：damai_tousu@member.alibaba.com 浙江省杭州市余杭区文一西路969号
                    </li>
                    <br>
                    <li class="footer_r_words_word">
                      违法不良信息举报电话：020-62108294
                    </li>
                  </ul>
                  <br>
                  <img src="imgs/首页电子执照.jpg " style="width: 100px;height: 30px ;float:left">
                  <img src="imgs/首页pci.jpg" style="width: 57px;height:30px ;float:left">
                  <img src="imgs/首页log1.jpg" style="width: 45px;height: 30px ;float:left">
                </el-col>
              </el-row>
            </div>
          </div>
        </el-footer>
      </el-container>
    </div>
  </div>

  <!--  <div>-->
  <!--    <h1>sjhcdasjkgc</h1>-->
  <!--  </div>-->
</template>


<style>
.center {
  width: 1550px;
  margin: 0 auto

}

body {

}

blockquote, body, code, dd, div, dl, dt, fieldset, form, h1, h2, h3, h4, h5, h6, input, legend, li, ol, p, pre, td, textarea, th, ul {
  margin: 0;
  padding: 0;
}

.el-header {
  background-color: white;
  line-height: 72px;
}

a:hover {
  color: #ff5c68
}

header a {
  margin: 10px;
  text-decoration: none;
  font-size: 16px;
  color: black;
}

.input-search {
  width: 200px;
  height: 51px;
  /*position: absolute;*/
  /*left: 0;*/
  /*top: 0;*/
  font-size: 14px;
  background-color: transparent;
  outline: 0;
  -webkit-appearance: none;
  padding: 0 10px 0 54px;
  border-top-left-radius: 46px;
  border-bottom-left-radius: 46px;
  border: 1px solid #f8f8f8;
  /*background-color: #f8f8f8;*/
  border-right-color: #FF1268;
  box-sizing: content-box;
}

.button-search {
  width: 82px;
  height: 100%;
  /*position: absolute;*/
  right: 0;
  top: 0;
  background: #FF1268;
  line-height: 46px;
  font-size: 16px;
  text-align: center;
  color: #FFF;
  border-radius: 0 27px 27px 0;

  letter-spacing: 4px;
  cursor: pointer;
}

.footer_links {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 36px 0;
  text-align: center;
  zoom: 1;
}

li, ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer_links_list {
  float: left;
  font-size: 13px;
  margin-left: 10px;
  margin-right: 10px;
  color: #111;
}

footer a {
  text-decoration: none;
  color: black;
}

.footer_r_1 {
  zoom: 1;
  padding-bottom: 10px;
}

.footer_r_1_a {
  float: left;
  display: block;
  width: 98px;
  height: 27px;
  line-height: 27px;
  text-align: center;
  background-color: #ff1268;
  color: #fff;
  font-size: 14px;
  border-radius: 20px;
}

.footer_r_words {
  padding-bottom: 6px;
}

.footer_r_words_word {
  float: left;
  font-size: 13px;
  color: #111;

}

.footer_r_words_line {
  float: left;
  padding: 0 15px;
}
</style>
<!-- 绘制验证码 -->
<script>

// window.onload = function () {
//   draw(show_num);
// };



</script>

<script>
export default {
  data() {
    return {
      user: {username: "", password: ""},
      vcode: "",
    }
  },
  methods: {
    login() {
      var val = document.getElementById("vcode");
      var num = show_num.join("");
      if (val != '') {
        if (val != num) {
          v.$message.error('验证码错误！');
          draw(show_num);
          return;
        }
      } else {
        v.$message.error('请输入验证码！');
        draw(show_num);
        return;
      }
      //location.href="Index.html";
      location.href = "admin1.html";
      //发出登录请求
      // axios.post("/login", v.user).then(function (response) {
      //     var val = document.getElementById("vcode").value;
      //     var num = show_num.join("");
      //     if (val != '') {
      //         if (val != num) {
      //             v.$message.error('验证码错误！');
      //             return;
      //         }
      //     } else {
      //         v.$message.error('请输入验证码！');
      //         return;
      //     }
      //     if (response.data == 1) {
      //         location.href = "/admin.html";
      //     } else if (response.data == 2) {
      //         v.$message.error("密码错误!");
      //     } else {
      //         v.$message.error("用户名不存在!");
      //     }
      // })

      var show_num = [];
      draw(show_num);

      function dj() {
        draw(show_num);
      }

      function draw(show_num) {
        var canvas_width = document.getElementById('canvas').clientWidth;
        var canvas_height = document.getElementById('canvas').clientHeight;
        var canvas = document.getElementById("canvas");//获取到canvas的对象，演员
        var context = canvas.getContext("2d");//获取到canvas画图的环境，演员表演的舞台
        canvas.width = canvas_width;
        canvas.height = canvas_height;
        var sCode = "A,B,C,E,F,G,H,J,K,L,M,N,P,Q,R,S,T,W,X,Y,Z,1,2,3,4,5,6,7,8,9,0,q,w,e,r,t,y,u,i,o,p,a,s,d,f,g,h,j,k,l,z,x,c,v,b,n,m";
        var aCode = sCode.split(",");
        var aLength = aCode.length;//获取到数组的长度

        for (var i = 0; i <= 3; i++) {
          var j = Math.floor(Math.random() * aLength);//获取到随机的索引值
          var deg = Math.random() * 30 * Math.PI / 180;//产生0~30之间的随机弧度
          var txt = aCode[j];//得到随机的一个内容
          show_num[i] = txt;
          var x = 10 + i * 20;//文字在canvas上的x坐标
          var y = 20 + Math.random() * 8;//文字在canvas上的y坐标
          context.font = "bold 23px 微软雅黑";

          context.translate(x, y);
          context.rotate(deg);

          context.fillStyle = randomColor();
          context.fillText(txt, 0, 0);

          context.rotate(-deg);
          context.translate(-x, -y);
        }
        for (var i = 0; i <= 5; i++) { //验证码上显示线条
          context.strokeStyle = randomColor();
          context.beginPath();
          context.moveTo(Math.random() * canvas_width, Math.random() * canvas_height);
          context.lineTo(Math.random() * canvas_width, Math.random() * canvas_height);
          context.stroke();
        }
        for (var i = 0; i <= 30; i++) { //验证码上显示小点
          context.strokeStyle = randomColor();
          context.beginPath();
          var x = Math.random() * canvas_width;
          var y = Math.random() * canvas_height;
          context.moveTo(x, y);
          context.lineTo(x + 1, y + 1);
          context.stroke();
        }
      }

      function randomColor() {//得到随机的颜色值
        var r = Math.floor(Math.random() * 256);
        var g = Math.floor(Math.random() * 256);
        var b = Math.floor(Math.random() * 256);
        return "rgb(" + r + "," + g + "," + b + ")";
      }
    },
    mounted() {

    }
  }
}
</script>


